<script setup>
// 我们api网站提供了接口
// 中括号必须添加
import {ref} from 'vue'
import {artGetChannelsService} from '@/api/article.js'

//声明父亲继承的东西
defineProps({
	modelValue:{
		type:[Number,String],
		
	}
})

//声明提交回传事件
const emit=defineEmits(['update:modelValue'])


//原始静态数据
const channelList=ref([])

//封装请求数据方法
const getChannelList=async()=>{
	// const res=await artGetChannelsService()
	// console.log(res);
	const res = await artGetChannelsService()
	// console.log(data);
	channelList.value=res.data.data
	console.log(channelList.value);
}

getChannelList()
//
</script>

<!-- 因为文章分类这个需要多次使用和调用所以需要单独封装一个模块进行使用 -->
<template>
	<el-select :modelValue="modelValue" @update:modelValue="emit('update:modelValue',$event)" style="width: 150px;">
		<!-- label是用户看的，value是传递给后台的 -->
		<!-- <el-option label="新闻" value=""></el-option>
		<el-option label="体育" value=""></el-option> -->
		<!-- <el-option
			v-for="item in articleList"
			:key="item.id"
			:label="item.title"
			:value="item.id"
		/> -->
		<el-option
			v-for="channel in channelList"
			:key="channel.id"
			:label="channel.cate_name"
			:value="channel.id"
		></el-option>
	</el-select>
</template>



<style>
</style>